<template>
  <scroller>
    <div class="deliver scroller-box">
      <card class="warning device-item" v-for="item in list" :key="item.id" @click.native="handleCardClick(item.id)">
        <card-header>
          <span slot="title">{{taskInfo['actAllot.allotNumber']}}</span>
          <span slot="text">{{taskInfo['actApply.actNode']}}</span>
        </card-header>
        <card-content>
          <div class="grid">
            <div class="grid-item h-full">
              <label class="label">调出单位</label>
              <span class="vlaue">{{item.takeOffice.name}}</span>
            </div>
            <div class="grid-item h-full">
              <label class="label">调出仓库</label>
              <span class="vlaue">{{item.dlvWarehouse.name}}</span>
            </div>
            <div class="grid-item h-full">
              <label class="label">调入单位</label>
              <span class="vlaue">{{item.takeOffice.name}}</span>
            </div>
            <div class="grid-item h-full">
              <label class="label">调入仓库</label>
              <span class="vlaue">{{item.takeWarehouse.name}}</span>
            </div>
            <div class="grid-item h-full">
              <label class="label">发货时间</label>
              <span class="vlaue">{{item.dlvTime}}</span>
            </div>
          </div>
        </card-content>
      </card>
    </div>
  </scroller>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loadmore } from 'mint-ui'

export default {
  name: 'ActApplyDeliver',
  components: {
    Loadmore
  },
  computed: {
    ...mapGetters({
      taskInfo: 'task/info'
    })
  },
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {}
  },
  methods: {
    handleCardClick (id) {
      this.$router.push({
        path: '/deliver/' + id
      })
    }
  },
  mounted () {
    console.log('this.list', this.list)
  }
}
</script>

<style lang="scss" scoped>
.deliver {
  height: 100%;
  background: #eaeeef;
  padding: 0.4rem 1rem;
}
</style>
